<template>
  <el-dialog
    :model-value="props.visible"
    :title="file.name"
    :close-on-click-modal="false"
    @close="props.visible = false"
    :show-close="false"
    width="80%"
    height="80%"
    top="5vh"
  >
    <div class="viewer-content">
      <pdf-viewer v-if="file.type === 'pdf'" :src="file.url" />
      <!-- <iframe src="https://vw.usdoc.cn/?src=http://usdoc.cn/vw/%E6%96%87%E4%BB%B6%E6%A8%A1%E6%9D%BF.docx" width="100%" height="600px" frameborder="0">
      </iframe> -->
      <!--  :blob="file.data" -->
      <!-- <docx-viewer v-else-if="file.type === 'docx'" /> -->
      <div class="flex justify-center align-center f" v-else>暂不支持其他格式</div>
    </div>
    <template #header="{ close, titleId, titleClass }">
      <div class="flex justify-between">
        <h4 :id="titleId" :class="titleClass">{{ file.name }}</h4>
        <el-button @click="handleClose">
          <el-icon class=""><Close /></el-icon>
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import PdfViewer from "./components/PdfViewer.vue";
import DocxViewer from "./components/DocxViewer.vue";
import { Close } from "@element-plus/icons-vue";
const props = defineProps<{
  file: Object;
  visible: boolean;
}>();

const emit = defineEmits<{
  (e: "update:visible", value: boolean): void;
}>();

const handleClose = () => {
  emit("update:visible", false);
};
</script>
<style>
.viewer-content {
  width: 100%;
  height: 80vh;
}
</style>
